<template>
  <div class="container">
    <!-- 基本信息 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <el-form :inline="true" label-width="120px" @submit.native.preventv>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="Medical ID">
                  <el-input v-model="Data.p_iForm.medicalID" ref="medicalID"
                    @keyup.enter.native="focusNext('name')"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名">
                  <el-input v-model="Data.p_iForm.name" ref="name" @keyup.enter.native="focusNext('career')"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职业">
                  <el-input v-model="Data.p_iForm.career" ref="career"
                    @keyup.enter.native="focusNext('SOD')"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="SOD">
                  <el-input :value="Data.p_iForm.SOD" ref="SOD" @keyup.enter.native="focusNext('DM')"
                    @input="handleInput('SOD', $event)"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="糖尿病史">
                  <el-radio-group v-model="Data.p_iForm.DM" ref="DM" @keydown.space="selectRadio">
                    <el-radio :label="true" @keyup.enter.native="focusNext('MT')">是</el-radio>
                    <el-radio :label="false" @keyup.enter.native="focusNext('MT')">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="恶性肿瘤史">
                  <el-radio-group v-model="Data.p_iForm.MT" ref="MT">
                    <el-radio :label="true" @keyup.enter.native="focusNext('followTime')">是</el-radio>
                    <el-radio :label="false" @keyup.enter.native="focusNext('followTime')">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="随访时间">
                  <el-date-picker v-model="Data.p_iForm.followTime" type="datetime" ref="diagnosis"
                    @keyup.enter.native="focusNext('MT')"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="是否确诊">
                  <el-radio-group v-model="Data.p_iForm.diagnosis" ref="diagnosis">
                    <el-radio :label="true" @keyup.enter.native="focusNext('liver')">是</el-radio>
                    <el-radio :label="false" @keyup.enter.native="focusNext('liver')">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="肝功是否异常">
                  <el-radio-group v-model="Data.p_iForm.liver" ref="liver">
                    <el-radio :label="true" @keyup.enter.native="focusNext('ACE')">是</el-radio>
                    <el-radio :label="false" @keyup.enter.native="focusNext('ACE')">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="ACE">
                  <el-input :value="Data.p_iForm.ACE" ref="ACE" @keyup.enter.native="focusNext('bulla')"
                    @input="handleInput('ACE', $event)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>

      <!-- COPD -->
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>慢性肺病史</span>
          </div>
          <el-form :inline="true" label-width="120px" @submit.native.prevent>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="是否有肺大泡">
                  <el-radio-group v-model="Data.p_iForm.bulla" ref="bulla">
                    <el-radio :label="true" @keyup.enter.native="focusNext('bronchiectasis')">是</el-radio>
                    <el-radio :label="false" @keyup.enter.native="focusNext('bronchiectasis')">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否有支气管扩张">
                  <el-radio-group v-model="Data.p_iForm.bronchiectasis" ref="bronchiectasis">
                    <el-radio :label="true" @keyup.enter.native="focusNext('emphysema')">是</el-radio>
                    <el-radio :label="false" @keyup.enter.native="focusNext('emphysema')">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="是否有肺气肿">
                  <el-radio-group v-model="Data.p_iForm.emphysema" ref="emphysema">
                    <el-radio :label="true" @keyup.enter.native="focusNext('other')">是</el-radio>
                    <el-radio :label="false" @keyup.enter.native="focusNext('other')">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="其他">
                  <el-input v-model="Data.p_iForm.other" ref="other" @keyup.enter.native.stop="focusNext('age')"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!-- LCBP -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>LCBP</span>
          </div>
          <el-form :inline="true" label-width="120px" @submit.native.prevent>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="年龄">
                  <el-input v-model.number="Data.p_iForm.age" ref="age"
                    @keyup.enter.native="focusNext('sex')"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-radio-group v-model="Data.p_iForm.sex" ref="sex">
                    <el-radio :label="true" @keyup.enter.native="focusNext('smoke')">男</el-radio>
                    <el-radio :label="false" @keyup.enter.native="focusNext('smoke')">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="是否吸烟">
                  <el-radio-group v-model="Data.p_iForm.smoke" ref="smoke">
                    <el-radio :label="true" @keyup.enter.native="focusNext('nodule_diameter')">是</el-radio>
                    <el-radio :label="false" @keyup.enter.native="focusNext('nodule_diameter')">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结节直径">
                  <el-input :value="Data.p_iForm.nodule_diameter" ref="nodule_diameter"
                    @keyup.enter.native="focusNext('nodule_spicules')"
                    @input="handleInput('nodule_diameter', $event)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="结节有无毛刺">
                  <el-radio-group v-model="Data.p_iForm.nodule_spicules" ref="nodule_spicules">
                    <el-radio :label="true" @keyup.enter.native="focusNext('PrGRP')">是</el-radio>
                    <el-radio :label="false" @keyup.enter.native="focusNext('PrGRP')">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="PrGRP">
                  <el-input :value="Data.p_iForm.PrGRP" ref="PrGRP" @keyup.enter.native="focusNext('CEA')"
                    @input="handleInput('PrGRP', $event)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="CEA">
                  <el-input :value="Data.p_iForm.CEA" ref="CEA" @keyup.enter.native="focusNext('SCC')"
                    @input="handleInput('CEA', $event)"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="SCC">
                  <el-input :value="Data.p_iForm.SCC" ref="SCC" @keyup.enter.native="focusNext('CYFRA')"
                    @input="handleInput('SCC', $event)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="CYFRA21-1">
                  <el-input :value="Data.p_iForm.CYFRA" ref="CYFRA" @keyup.enter.native="focusNext('n_size')"
                    @input="handleInput('CYFRA', $event)"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="LCBP">
                  <el-input v-model="calculatedLCBP" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>

      <!-- CT -->
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>CT</span>
          </div>
          <el-form :inline="true" label-width="120px" @submit.native.prevent>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="结节大小">
                  <el-input v-model.number="Data.p_iForm.n_size" ref="n_size"
                    @keyup.enter.native="focusNext('calcification')"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否钙化">
                  <el-radio-group v-model="Data.p_iForm.calcification" ref="calcification"
                    @keyup.enter.native="focusNext('n_morphology')">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="结节形态">
                  <el-input v-model="Data.p_iForm.n_morphology" ref="n_morphology"
                    @keyup.enter.native="focusNext('n_num')"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结节数量">
                  <el-input v-model="Data.p_iForm.n_num" ref="n_num"
                    @keyup.enter.native="focusNext('n_density')"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="结节密度">
                  <el-input v-model="Data.p_iForm.n_density" ref="n_density"
                    @keyup.enter.native="focusNext('n_location')"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结节部位">
                  <el-input v-model="Data.p_iForm.n_location" ref="n_location"
                    @keyup.enter.native="focusNext('CTR')"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="CTR">
                  <el-input v-model="Data.p_iForm.CTR" ref="CTR"
                    @keyup.enter.native="focusNext('n_grading')"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结节分级">
                  <el-input v-model="Data.p_iForm.n_grading" ref="n_grading"
                    @keyup.enter.native="focusNext('n_interface')"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="结节肺界面">
                  <el-input v-model="Data.p_iForm.n_interface" ref="n_interface"
                    @keyup.enter.native="focusNext('n_edge')"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结节边缘">
                  <el-input v-model="Data.p_iForm.n_edge" ref="n_edge"
                    @keyup.enter.native="focusNext('P53')"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <!-- 癌症相关 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>肺癌抗体</span>
          </div>
          <el-form :inline="true" label-width="120px" @submit.native.prevent>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="P53">
                  <el-input :value="Data.p_iForm.P53" ref="P53" @keyup.enter.native="focusNext('PGP')"
                    @input="handleInput('P53', $event)"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="PGP9.5">
                  <el-input :value="Data.p_iForm.PGP" ref="PGP" @keyup.enter.native="focusNext('SOX2')"
                    @input="handleInput('PGP', $event)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="SOX2">
                  <el-input :value="Data.p_iForm.SOX2" ref="SOX2" @keyup.enter.native="focusNext('GAGE7')"
                    @input="handleInput('SOX2', $event)"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="GAGE7">
                  <el-input :value="Data.p_iForm.GAGE7" ref="GAGE7" @keyup.enter.native="focusNext('GBU')"
                    @input="handleInput('GAGE7', $event)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="GBU4-5">
                  <el-input :value="Data.p_iForm.GBU" ref="GBU" @keyup.enter.native="focusNext('MAGEA1')"
                    @input="handleInput('GBU', $event)"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="MAGEA1">
                  <el-input :value="Data.p_iForm.MAGEA1" ref="MAGEA1" @keyup.enter.native="focusNext('CAGE')"
                    @input="handleInput('MAGEA1', $event)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="CAGE">
                  <el-input :value="Data.p_iForm.CAGE" ref="CAGE" @keyup.enter.native="focusSubmitButton()"
                    @input="handleInput('CAGE', $event)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>

    </el-row>

    <el-button type="primary" ref="submitBtn" tabindex="0" @click="submitForm"
      style="display:block; margin: 20px auto;">提交</el-button>

    <div class="modal" @click="handleOutsideClick" v-if="isProcessing">
      <div class="modal-dialog" @click.stop>
        <div class="modal-content">
          <div class="modal-body">
            <p style="font-weight: bold; font-size:x-large;">提交成功！</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { Form, FormItem, Input, Radio, DatePicker, Button, Card, Row, Col } from 'element-ui';

export default {
  components: {
    ElForm: Form,
    ElFormItem: FormItem,
    ElInput: Input,
    ElRadio: Radio,
    ElDatePicker: DatePicker,
    ElButton: Button,
    ElCard: Card,
    ElRow: Row,
    ElCol: Col
  },
  data() {
    return {
      urls: {
        insertP_I: '/medical/lable/insertP_I',

      },
      isProcessing: false,
      Data: {
        tagType: 'eye',
        p_iForm: {
          id: null,
          medicalID: '',
          name: '',
          career: '',
          SOD: '',
          DM: null,
          MT: null,
          followTime: null,
          diagnosis: null,
          ACE: '',
          liver: null,
          bulla: null,
          bronchiectasis: null,
          emphysema: null,
          other: '',
          P53: '',
          PGP: '',
          SOX2: '',
          GAGE7: '',
          GBU: '',
          MAGEA1: '',
          CAGE: '',
          age: null,
          sex: null,
          smoke: null,
          nodule_diameter: '',
          nodule_spicules: null,
          PrGRP: '',
          CEA: '',
          SCC: '',
          CYFRA: '',
          LCBP: '',
          n_size: '',
          n_morphology: '',
          n_num: '',
          n_density: '',
          n_location: '',
          CTR: '',
          n_grading: '',
          n_interface: '',
          n_edge: '',
          calcification: '',
        }

      }
    };
  },
  computed: {
    calculatedLCBP() {
      const { age, sex, smoke, nodule_diameter, nodule_spicules, PrGRP, CEA, SCC, CYFRA } = this.Data.p_iForm;

      // 检查所有必需字段是否都已填写
      if (age === null || sex === null || smoke === null || nodule_diameter === '' ||
        nodule_spicules === null || PrGRP === '' || CEA === '' || SCC === '' || CYFRA === '') {
        return '';
      }

      // 计算X值
      let X = -5.6017 +
        (0.0264 * age) +
        (8.8539 * (smoke ? 1 : 0)) +
        (0.1859 * nodule_diameter) +
        (3.1865 * (nodule_spicules ? 1 : 0)) +
        (-8.7109 * (sex ? 1 : 0)) +
        (-0.00001 * PrGRP) +
        (0.0057 * SCC) +
        (0.1686 * CYFRA) +
        (-0.00311 * CEA);

      // 计算 e 乘 X
      const eTimesX = Math.E * X;
      const LCBP = eTimesX / (1 + eTimesX);

      // 设置计算结果到Data对象中
      this.Data.p_iForm.LCBP = LCBP;

      // 返回格式化后的LCBP值
      return LCBP.toFixed(6); // 保留六位小数
    }
  },
  methods: {
    focusNext(refName) {
      this.$nextTick(() => {
        const nextElement = this.$refs[refName];
        if (nextElement) {
          // 如果是 el-radio-group，手动触发焦点到第一个选项
          if (nextElement.$el && nextElement.$el.querySelector('label')) {
            const firstRadio = nextElement.$el.querySelector('label');
            firstRadio.focus();
          } else {
            // 其他情况设置焦点
            nextElement.focus();
          }
        } else if (refName === 'submitBtn') {
          // 如果下一个元素是提交按钮，则设置其焦点
          this.$refs.submitBtn.focus();
        }
      });
    },
    focusSubmitButton() {
      this.$nextTick(() => {
        const submitBtn = this.$refs.submitBtn;
        if (submitBtn && submitBtn.$el) {
          // 确保按钮可以接收焦点
          submitBtn.$el.tabIndex = 0;

          // 设置焦点到按钮的原生 DOM 元素
          submitBtn.$el.focus();

          // 如果你想要在聚焦后立即激活按钮（视觉上突出显示），可以添加以下代码：
          // submitBtn.$el.click(); // 注意：这会触发按钮点击事件，谨慎使用
        }
      });
    },

    checkForKeyPress(event) {
      if (event.key === 'Enter' && this.isAwaitingFinalConfirm) {
        // 移除监听器，防止多次触发
        document.removeEventListener('keyup', this.checkForKeyPress);

        // 执行提交操作并重置标志
        this.submitForm();
        this.isAwaitingFinalConfirm = false;
      }
    },
    selectRadio(event) {
      const group = this.$refs.DM;
      // 获取当前焦点的单选按钮
      const focusedRadio = Array.from(group.$el.querySelectorAll('input')).find(input => input === document.activeElement);

      if (focusedRadio) {
        focusedRadio.click(); // 触发点击事件，相当于选择当前单选按钮
      }
    },
    handleInput(field, value) {
      // 允许合法小数和空值
      if (/^(\d+(\.\d*)?)?$/.test(value)) {
        this.Data.p_iForm[field] = value
      }
    },
    beforeDestroy() {
      // 清理可能存在的全局事件监听器
      if (this.isAwaitingFinalConfirm) {
        document.removeEventListener('keyup', this.checkForKeyPress);
      }
    },
    submitForm() {
      // 将p_iForm转换为JSON格式并发送给后端
      this.Data.p_iForm.SOD = parseFloat(this.Data.p_iForm.SOD)
      const jsonData = JSON.stringify(this.Data);
      console.log('jsonData:' + jsonData);
      // 使用axios或其他HTTP库发送POST请求
      axios.post(`${this.URLhost}${this.urls.insertP_I}`, jsonData, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(response => {
        console.log('成功:', response);
        this.isProcessing = true;
      }).catch(error => {
        console.error('错误:', error);
      });
    },
    handleOutsideClick(event) {
      if (event.target === event.currentTarget) {
        this.isProcessing = false;
      }
    },

  }
};
</script>

<style scoped>
.container {
  font-size: 16px;
  /* 增大字体 */
}

.box-card {
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 10px;
  /* 减小输入框间距 */
}

/* 调整输入框宽度 */
.el-input {
  width: 90%;
}

/* 中心对齐提交按钮 */
.el-button {
  width: 200px;
  font-size: 18px;
  /* 增大按钮文字 */
}


/* 模态框样式 */
.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-dialog {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border-radius: 5px;
  width: 30%;
  text-align: center;
}

.modal-body p {
  font-size: 16px;
  color: #333;
}
</style>